<template>
  <el-container class="home-container">
     <el-header>
      <div>
        <span class="title">剧场座位图管理系统</span>
        <el-button type='info' @click="logOut()" class="exitbotton">退出</el-button>
      </div>
    </el-header>
    <!-- 页面主体 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width='200px'>
        <el-menu
          class="aside-menu"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :default-active="activePath"
          style="height: 100%"
          >
          <el-menu-item index="/welcome" @click="siderouter('/welcome')">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>剧场管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
              v-for="item in menulist"
              :index="item.path"
              :key="item.id"
              @click="saveNav(item.path)">
                {{item.theaterName}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item v-for="(item, i) in menu" :key="i" :index="item.menupath" @click="siderouter(i)">
            <i :class="item.icon"></i>
            <span slot="title">{{item.menuname}}</span>
          </el-menu-item>
          </el-menu>
      </el-aside>
      <!-- 右侧主体 -->
      <el-main>
        <!-- 用include来配置需要缓存的页面 -->
        <keep-alive :include="home">
        <router-view></router-view>
        </keep-alive>
        <!-- 也可以用meta属性结合来控制 -->
        <!-- meta属性为ture的就走keepalive -->
        <!-- meta属性为false就不被keepalive包裹 -->
        <!-- <router-view v-if="!$route.meta.isAlive"></router-view> -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapActions } from 'vuex'

// 导入网络请求
import { getmenu } from '../../network/home'

export default {
  name: 'home',
  data () {
    return {
      // 剧院管理侧栏菜单数据
      menulist: [],
      // 侧栏菜单数据
      menu: [
        { menupath: '/showManage', menuname: '剧目管理', icon: 'el-icon-s-ticket' },
        { menupath: '/userManage', menuname: '用户管理', icon: 'el-icon-user' }
      ],
      // 当前二级菜单选中的链接
      activePath: ''
    }
  },
  methods: {
    ...mapActions(['clearUser']),
    // 获取剧场列表参数，并且提取出想要的信息
    getMenuList () {
      // this.$axios.get('http://localhost:3033/menus')
      getmenu().then(res => {
        res.data.forEach((currentV, index) => {
          this.menulist.push({
            'id': `${currentV['id']}`,
            'theaterName': `${currentV['theaterName']}`,
            'path': `${currentV['path']}`
          })
        })
      })
    },
    // 存入当前二级菜单选择的URL 保存激活状态
    saveNav (path) {
      this.Bus.$emit('getTheaterName', path)
      // 点击之后要显示加载mask
      this.Bus.$emit('showMask')
      this.$nextTick(() => {
        if (this.$route.path !== '/theaterManage') {
          this.$router.push(`/theaterManage`)
        }
      })
      window.sessionStorage.setItem('path', path)
      this.activePath = path
    },
    // 侧边导航点击
    siderouter (i) {
      let currentpath
      let t = typeof i
      if (t !== 'number') {
        currentpath = i
      } else {
        currentpath = this.menu[i].menupath
      }
      this.$router.push(currentpath)
    },
    // 退出操作
    logOut () {
      this.clearUser()
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  },
  created () {
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('path')
  }
}
</script>

<style lang='stylus' scoped>
.home-container
  width 100%
  height 100vh
  .el-header
    display flex
    position relative
    justify-content space-between
    align-items center
    padding 0
    height 48px!important
    background-color #373d41
    div
      align-items center
      width 100%
      .title
        margin-left 8px
        color #ffffff
        font-size 16px
      .exitbotton
        position absolute
        right 16px
        top 50%
        transform translateY(-50%)
      /deep/.el-menu
        height 100%
  // 保证首页不跟随滚动，使用calc()函数来计算高度
  .el-container
    height calc(100% - 48px)
    .el-main
     padding 10px 5px 0 5px
</style>
